@charset"UFT-8";
$fontSize:40;
@function r($p){
    @return $p/$fontSize*1rem;
}
*{
    font-size: 0;
}
html,body{
    height: 100%;
    width: 100%;
    font-size: 40px;
}
.web,.web6{
    width: 100%;
    height: 100%;
    background: url(../img/oldsong1.jpg);
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
    >.light{
        position:absolute;
        right: 0;
        top:0;
        width: 50%;
        animation: bounceInDown 1s;
        >img{
            width: 100%;
        }
    }
    >.oldman{
        position: absolute;
        left: 7%;
        top: 6%;
        height: 60%;
        z-index: 80;
        animation: slideInRight 1s;
        >img{
            height: 100%;
        }
    }
    >.sunflowers{
        position: absolute;
        left: 5%;
        top:32%;
        width: 92%;
        z-index: 12;
        animation: bounceInDown 1s;
        >img{
            width: 100%;
        }
    }
    >.option{
        position: absolute;
        width: 100%;
        bottom:2%;
        left: 2.5%;
        >.a{
            position: relative;
            width: 70%;
            margin-bottom: 1%;
            >img{
                width: 100%;
            }
            >p{
                position: absolute;
                font-size: 20px;
                line-height: 20px;
                font-weight: bold;
                left: 26%;
                top: 50%;
                transform: translateY(-50%);
            }
            .yes{
                width: 30%;
                position: absolute;
                left: -2%;
                display: none;
            }
            .wrong{
                width: 28%;
                position: absolute;
                display: none;
                left: -2%;
            }
        }
        >.b{
            position: relative;
            width: 70%;
            margin-bottom: 1%;
            >img{
                width: 100%;
            }
            >p{
                position: absolute;
                font-size: 20px;
                line-height: 20px;
                font-weight: bold;
                left: 26%;
                top: 50%;
                transform: translateY(-50%);
            }
            .yes{
                width: 30%;
                position: absolute;
                left: -2%;
                display: none;
            }
            .wrong{
                width: 28%;
                position: absolute;
                display: none;
                left: -2%;
            }
        }
        >.c{
            position: relative;
            width: 70%;
            >img{
                width: 100%;
            }
            >p{
                position: absolute;
                font-size: 20px;
                font-weight: bold;
                line-height: 20px;
                left: 28%;
                top: 50%;
                transform: translateY(-50%);
            }
            .yes{
                width: 30%;
                position: absolute;
                left: -2%;
                display: none;
            }
            .wrong{
                width: 28%;
                position: absolute;
                display: none;
                left: -2%;
            }
        }
    }
    >.mouse,{
        width: 20.8%;
        position: absolute;
        right: 4.2%;
        bottom: 22%;
        z-index: 555;
        animation: heartBeat 1s infinite;
        >img{
            width: 100%;
        }
        >span{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            font-size: 26px;
            color: #000000;
            font-weight: bold;
        }
    }
    >.next{
        width: 13%;
        position: absolute;
        bottom: 1%;
        right: 6.8%;
        >img{
            width: 100%;
        }
    }
}
.web6{
    display: none;
}
.web1,.web7{
    width: 100%;
    height: 100%;
    background: url(../img/oldsong1.jpg);
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
    display: none;
    >.light{
        position:absolute;
        right: 0;
        top:0;
        width: 50%;
        animation: bounceInDown 1s;
        >img{
            width: 100%;
        }
    }
    >.car{
        position: absolute;
        top: 26%;
        width: 100%;
        z-index: 80;
        animation: slideInRight 1s;
        >img{
            width: 100%;
        }
    }
    >.yaoyaoyao{
        position: absolute;
        width: 64%;
        top: 12%;
        left: 12%;
        animation: slideInRight 1s;
        >img{
            width: 100%;
        }
    }
    >.option{
        position: absolute;
        width: 100%;
        bottom:2%;
        left: 2.5%;
        >.a{
            position: relative;
            width: 70%;
            margin-bottom: 1%;
            >img{
                width: 100%;
            }
            >p{
                position: absolute;
                font-size: 20px;
                line-height: 20px;
                font-weight: bold;
                left: 26%;
                top: 50%;
                transform: translateY(-50%);
            }
            .yes{
                width: 30%;
                position: absolute;
                left: -2%;
                display: none;
            }
            .wrong{
                width: 28%;
                position: absolute;
                display: none;
                left: -2%;
            }
        }
        >.b{
            position: relative;
            width: 70%;
            margin-bottom: 1%;
            >img{
                width: 100%;
            }
            >p{
                position: absolute;
                font-size: 20px;
                line-height: 20px;
                font-weight: bold;
                left: 26%;
                top: 50%;
                transform: translateY(-50%);
            }
            .yes{
                width: 30%;
                position: absolute;
                left: -2%;
                display: none;
            }
            .wrong{
                width: 28%;
                position: absolute;
                display: none;
                left: -2%;
            }
        }
        >.c{
            position: relative;
            width: 70%;
            >img{
                width: 100%;
            }
            >p{
                position: absolute;
                font-size: 20px;
                font-weight: bold;
                line-height: 20px;
                left: 28%;
                top: 50%;
                transform: translateY(-50%);
            }
            .yes{
                width: 30%;
                position: absolute;
                left: -2%;
                display: none;
            }
            .wrong{
                width: 28%;
                position: absolute;
                display: none;
                left: -2%;
            }
        }
    }
    >.mouse,{
        width: 20.8%;
        position: absolute;
        right: 4.2%;
        bottom: 22%;
        z-index: 555;
        animation: heartBeat 1s infinite;
        >img{
            width: 100%;
        }
        >span{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            font-size: 26px;
            color: #000000;
            font-weight: bold;
        }
    }
    >.next{
        width: 13%;
        position: absolute;
        bottom: 1%;
        right: 6.8%;
        >img{
            width: 100%;
        }
    }
}
.web2,.web8{
    width: 100%;
    height: 100%;
    background: url(../img/yaogunbg.jpg);
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
    display: none;
    >.light{
        position:absolute;
        right: 0;
        top:0;
        width: 50%;
        animation: bounceInDown 1s;
        >img{
            width: 100%;
        }
    }
    >.man{
        position: absolute;
        transform: translateX(-50%);
        left: 50%; 
        top: 8%;
        height: 56%;
        z-index: 80;
        animation: zoomIn 1s;
        >img{
            height: 100%;
        }
    }
    >.wow{
        position: absolute;
        width: 100%;
        top: 28%;
        left: 0;
        animation: heartBeat 1s infinite;
        >img{
            width: 100%;
        }
    }
    >.option{
        position: absolute;
        width: 100%;
        bottom:2%;
        left: 2.5%;
        >.a{
            position: relative;
            width: 70%;
            margin-bottom: 1%;
            >img{
                width: 100%;
            }
            >p{
                position: absolute;
                font-size: 20px;
                line-height: 20px;
                font-weight: bold;
                left: 26%;
                top: 50%;
                transform: translateY(-50%);
            }
            .yes{
                width: 30%;
                position: absolute;
                left: -2%;
                display: none;
            }
            .wrong{
                width: 28%;
                position: absolute;
                display: none;
                left: -2%;
            }
        }
        >.b{
            position: relative;
            width: 70%;
            margin-bottom: 1%;
            >img{
                width: 100%;
            }
            >p{
                position: absolute;
                font-size: 20px;
                font-weight: bold;
                line-height: 20px;
                left: 26%;
                top: 50%;
                transform: translateY(-50%);
            }
            .yes{
                width: 30%;
                position: absolute;
                left: -2%;
                display: none;
            }
            .wrong{
                width: 28%;
                position: absolute;
                display: none;
                left: -2%;
            }
        }
        >.c{
            position: relative;
            width: 70%;
            >img{
                width: 100%;
            }
            >p{
                position: absolute;
                font-size: 20px;
                font-weight: bold;
                left: 28%;
                line-height: 20px;
                top: 50%;
                transform: translateY(-50%);
            }
            .yes{
                width: 30%;
                position: absolute;
                left: -2%;
                display: none;
            }
            .wrong{
                width: 28%;
                position: absolute;
                display: none;
                left: -2%;
            }
        }
    }
    >.mouse,{
        width: 20.8%;
        position: absolute;
        right: 4.2%;
        bottom: 22%;
        z-index: 555;
        animation: heartBeat 1s infinite;
        >img{
            width: 100%;
        }
        >span{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            font-size: 26px;
            color: #000000;
            font-weight: bold;
        }
    }
    >.next{
        width: 13%;
        position: absolute;
        bottom: 1%;
        right: 6.8%;
        >img{
            width: 100%;
        }
    }
}
.web3{
    width: 100%;
    height: 100%;
    background: url(../img/oldsong1.jpg);
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
    display: none;
    >.xiyou{
        position: absolute;
        left: 0%;
        top: 15%;
        width: 100%;
        animation: bounceInUp 1s;
        >img{
            width: 100%;
        }
    }
    >.ai{
        position: absolute;
        left: 2%;
        top:3.6%;
        width: 86%;
        z-index: 12;
        animation: shake 1s infinite;
        >img{
            width: 100%;
        }
    }
    >.option{
        position: absolute;
        width: 100%;
        bottom:2%;
        left: 2.5%;
        >.a{
            position: relative;
            width: 70%;
            margin-bottom: 1%;
            >img{
                width: 100%;
            }
            >p{
                position: absolute;
                font-size: 20px;
                line-height: 20px;
                font-weight: bold;
                left: 26%;
                top: 50%;
                transform: translateY(-50%);
            }
            .yes{
                width: 30%;
                position: absolute;
                left: -2%;
                display: none;
            }
            .wrong{
                width: 28%;
                position: absolute;
                display: none;
                left: -2%;
            }
        }
        >.b{
            position: relative;
            width: 70%;
            margin-bottom: 1%;
            >img{
                width: 100%;
            }
            >p{
                position: absolute;
                line-height: 20px;
                font-size: 20px;
                font-weight: bold;
                left: 26%;
                top: 50%;
                transform: translateY(-50%);
            }
            .yes{
                width: 30%;
                position: absolute;
                left: -2%;
                display: none;
            }
            .wrong{
                width: 28%;
                position: absolute;
                display: none;
                left: -2%;
            }
        }
        >.c{
            position: relative;
            width: 70%;
            >img{
                width: 100%;
            }
            >p{
                position: absolute;
                font-size: 20px;
                line-height: 20px;
                font-weight: bold;
                left: 28%;
                top: 50%;
                transform: translateY(-50%);
            }
            .yes{
                width: 30%;
                position: absolute;
                left: -2%;
                display: none;
            }
            .wrong{
                width: 28%;
                position: absolute;
                display: none;
                left: -2%;
            }
        }
    }
    >.mouse,{
        width: 20.8%;
        position: absolute;
        right: 4.2%;
        bottom: 22%;
        z-index: 555;
        animation: heartBeat 1s infinite;
        >img{
            width: 100%;
        }
        >span{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            font-size: 26px;
            color: #000000;
            font-weight: bold;
        }
    }
    >.next{
        width: 13%;
        position: absolute;
        bottom: 1%;
        right: 6.8%;
        >img{
            width: 100%;
        }
    }
}
.web4,.web9{
    width: 100%;
    height: 100%;
    background: url(../img/jindianbg.png);
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
    display: none;
    >.light{
        position:absolute;
        right: 0;
        top:0;
        width: 50%;
        animation: bounceInDown 1s;
        >img{
            width: 100%;
        }
    }
    >.danbang{
        position: absolute;
        right: 0;
        top: 33%;
        width: 55.8%;
        z-index: 222;
        animation: bounceInRight 1s;
        >img{
            width: 100%;
        }
    }
    >.soap{
        position: absolute;
        left: 9%;
        top:9.3%;
        width: 82.6%;
        z-index: 12;
        animation: bounceInDown 1s;
        >img{
            width: 100%;
        }
    }
    >.option{
        position: absolute;
        width: 100%;
        bottom:2%;
        left: 2.5%;
        >.a{
            position: relative;
            width: 70%;
            margin-bottom: 1%;
            >img{
                width: 100%;
            }
            >p{
                position: absolute;
                line-height: 20px;
                font-size: 20px;
                font-weight: bold;
                left: 26%;
                top: 50%;
                transform: translateY(-50%);
            }
            .yes{
                width: 30%;
                position: absolute;
                left: -2%;
                display: none;
            }
            .wrong{
                width: 28%;
                position: absolute;
                display: none;
                left: -2%;
            }
        }
        >.b{
            position: relative;
            width: 70%;
            margin-bottom: 1%;
            >img{
                width: 100%;
            }
            >p{
                position: absolute;
                font-size: 20px;
                font-weight: bold;
                left: 26%;
                line-height: 20px;
                top: 50%;
                transform: translateY(-50%);
            }
            .yes{
                width: 30%;
                position: absolute;
                left: -2%;
                display: none;
            }
            .wrong{
                width: 28%;
                position: absolute;
                display: none;
                left: -2%;
            }
        }
        >.c{
            position: relative;
            width: 70%;
            >img{
                width: 100%;
            }
            >p{
                position: absolute;
                font-size: 20px;
                font-weight: bold;
                line-height: 20px;
                left: 28%;
                top: 50%;
                transform: translateY(-50%);
            }
            .yes{
                width: 30%;
                position: absolute;
                left: -2%;
                display: none;
            }
            .wrong{
                width: 28%;
                position: absolute;
                display: none;
                left: -2%;
            }
        }
    }
    >.mouse,{
        width: 20.8%;
        position: absolute;
        right: 4.2%;
        bottom: 22%;
        z-index: 555;
        animation: heartBeat 1s infinite;
        >img{
            width: 100%;
        }
        >span{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            font-size: 26px;
            color: #000000;
            font-weight: bold;
        }
    }
    >.next{
        width: 13%;
        position: absolute;
        bottom: 1%;
        right: 6.8%;
        >img{
            width: 100%;
        }
    }
}
.web5{
    width: 100%;
    height: 100%;
    background: url(../img/liuxingbg.png);
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
    display: none;
    >.nvshen{
        position: absolute;
        right: 0;
        top: 1.5%;
        width: 100%;
        >img{
            width: 100%;
        }
    }
    >.tiangou{
        position: absolute;
        left: 3.8%;
        top:29.3%;
        width: 92.2%;
        animation: bounceInLeft 1s;
        >img{
            width: 100%;
        }
    }
    >.option{
        position: absolute;
        width: 100%;
        bottom:2%;
        left: 2.5%;
        >.a{
            position: relative;
            width: 70%;
            margin-bottom: 1%;
            >img{
                width: 100%;
            }
            >p{
                position: absolute;
                font-size: 20px;
                line-height: 20px;
                font-weight: bold;
                left: 26%;
                top: 50%;
                transform: translateY(-50%);
            }
            .yes{
                width: 30%;
                position: absolute;
                left: -2%;
                display: none;
            }
            .wrong{
                width: 28%;
                position: absolute;
                display: none;
                left: -2%;
            }
        }
        >.b{
            position: relative;
            width: 70%;
            margin-bottom: 1%;
            >img{
                width: 100%;
            }
            >p{
                position: absolute;
                line-height: 20px;
                font-size: 20px;
                font-weight: bold;
                left: 26%;
                top: 50%;
                transform: translateY(-50%);
            }
            .yes{
                width: 30%;
                position: absolute;
                left: -2%;
                display: none;
            }
            .wrong{
                width: 28%;
                position: absolute;
                display: none;
                left: -2%;
            }
        }
        >.c{
            position: relative;
            width: 70%;
            >img{
                width: 100%;
            }
            >p{
                position: absolute;
                font-size: 20px;
                line-height: 20px;
                font-weight: bold;
                left: 28%;
                top: 50%;
                transform: translateY(-50%);
            }
            .yes{
                width: 30%;
                position: absolute;
                left: -2%;
                display: none;
            }
            .wrong{
                width: 28%;
                position: absolute;
                display: none;
                left: -2%;
            }
        }
    }
    >.mouse,{
        width: 20.8%;
        position: absolute;
        right: 4.2%;
        bottom: 22%;
        z-index: 555;
        animation: heartBeat 1s infinite;
        >img{
            width: 100%;
        }
        >span{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            font-size: 26px;
            color: #000000;
            font-weight: bold;
        }
    }
    >.next{
        width: 13%;
        position: absolute;
        bottom: 1%;
        right: 6.8%;
        >img{
            width: 100%;
        }
    }
}
.settlement{
    width: 100%;
    height: 100%;
    background: url(../img/resultbg.png);
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
    display: none;
    >.avatar{
        position: absolute;
        left:2.5% ;
        top: 1.5%;
        width: 38.5%;
        >img{
            width: 100%;
        }
    }
    >.medal{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 9.7%;
        width: 30.8%;
        >img{
            width: 100%;
        }
    }
    >.result{
        position: absolute;
        left: 3.2%;
        top: 32.2%;
        width: 93.7%;
        animation: jackInTheBox 1s;
        >img{
            width: 100%;
        }
        >p{
            position: absolute;
            left: 48%;
            transform: translateX(-50%);
            top: r(26);
            font-size:r(52);
        }
    }
    >.again{
        position: absolute;
        width: 39.8%;
        top:58.9% ;
        left: 5.7%;
        >a{
            >img{
                width: 100%;
            }
        }
    }
    
    >.share{
        position: absolute;
        width: 43.8%;
        top:58.9% ;
        right: 3.3%;
        animation: heartBeat 1s infinite;
        >img{
            width: 100%;
        }
    }
}
@media(min-height:740px){
    .light{
        position:absolute;
        right: 0;
        top:0;
        width: 55% !important;
        >img{
            width: 100%;
        }
    }
    .oldman{
        position: absolute;
        left: -1% !important;
        top: 10% !important;
        height: 60%;
        z-index: 80;
        >img{
            height: 100%;
        }
    }
    .sunflowers{
        position: absolute;
        left: 1% !important;
        top:42% !important;
        width: 98% !important;
        z-index: 12;
        >img{
            width: 100%;
        }
    }
    .option{
        position: absolute;
        width: 100%;
        bottom:4% !important;
        left: 2.5%;
        >.a{
            width: 70%;
            margin-bottom: 2% !important;
            >img{
                width: 100%;
            }
        }
        >.b{
            width: 70%;
            margin-bottom: 2% !important;
            >img{
                width: 100%;
            }
        }
        >.c{   
            width: 70%;
            >img{
                width: 100%;
            }
        }
    }
    .mouse{
        width: 21% !important;
        position: absolute;
        right: 4.2%;
        bottom: 20% !important;
        >img{
            width: 100%;
        }
    }
    .next{
        width: 15% !important;
        position: absolute;
        bottom: 1%;
        right: 6.8%;
        >img{
            width: 100%;
        }
    }
}
@media screen and (max-height:500px){
    .car{
        top: 23% !important;
    }
    .yaoyaoyao{
        top: 10% !important;
    }
    .ai{
        top: 0% !important;
    }
    .xiyou{
        top: 13% !important;
    }
    .soap{
        top:6% !important;
    }
    .tiangou{
        top: 25.3% !important;
    }
    .nvshen{
        top: 0.3% !important;
    }
    .mouse{
         bottom: 25% !important;
    }
    .option{
            >.a{
                >p{
                    font-size: 16px !important;
                    line-height: 16px !important;
                }
            }
            >.b{
                >p{
                    font-size: 16px !important;
                    line-height: 16px !important;
                }
            }
            >.c{
                >p{
                    font-size: 16px !important;
                    line-height: 16px !important;
                }
            }
        }
        
}
